import { ref, computed, nextTick } from "vue";
export const useComputedData = (leftList, leftListCheckedIndex, rightListData) => {
    // 左边列表的数据
    const leftListData = computed(() => {
        return leftList[leftListCheckedIndex.value]["data"]
    })
    // 左边列表选中的数据的条数
    const leftListCheckedNum = computed(() => {
        return (leftListData.value || []).filter((v) => v.$checked).length;
    });
    // 右边列表选中的数据的条数
    const rightListCheckedNum = computed(() => {
        return rightListData.value.length !== 0 ? rightListData.value.filter((v) => v.$checked).length : 0
    });
    // 左边列表全部的数据的条数
    const leftListTotalNum = computed(() => {
        return leftListData.value.length;
    });
    // 右边列表全部的数据的条数
    const rightListTotalNum = computed(() => {
        return rightListData.value.length;
    });
    // 左边全选
    const leftCheckedAll = computed(() => {
        return leftListData.value.length !== 0 ? leftListData.value.every((e) => e.$checked) : false
    });
    // 右边全选
    const rightCheckedAll = computed(() => {
        return rightListData.value.length !== 0 ? rightListData.value.every((e) => e.$checked) : false
    });
    // 左按钮是否禁用
    const leftBtnIsDisabled = computed(() => {
        return rightListCheckedNum.value === 0;
    });
    // 右按钮是否禁用
    const rightBtnIsDisabled = computed(() => {
        return leftListCheckedNum.value === 0;
    });
    return {
        leftListData,
        leftListCheckedNum,
        rightListCheckedNum,
        leftListTotalNum,
        rightListTotalNum,
        leftCheckedAll,
        rightCheckedAll,
        leftBtnIsDisabled,
        rightBtnIsDisabled
    }
}
export const useLeftListCheckedIndex = () => {
    let leftListCheckedIndex = ref(0)
    const setListCheckedIndex = (initIndex) => {
        leftListCheckedIndex.value = initIndex
    }
    return {
        leftListCheckedIndex,
        setListCheckedIndex
    }
}
export const useRightListData = () => {
    const rightList = ref([]);
    const getRightListData = computed(() => {
        return rightList.value;
    });
    return {
        rightList,
        getRightListData
    }
}
export const useCheckedData = (leftListData, rightList, setCheckLeftData, setCheckRightData) => {
    const setCheckedData = (leftOrRight, checked, radioOrAll, key) => {
        const checkedCurData =
            leftOrRight === "left" ? leftListData.value : rightList.value;
        const filterData = checkedCurData.filter((e) => e.key === key)
        if (radioOrAll === "radio") {
            filterData.forEach((e) => {
                e.$checked = checked;
            });
        } else {
            checkedCurData.forEach((e) => {
                e.$checked = checked;
            });
        }
    }
    const setCustomizeCheckedData = (leftOrRight, leftData, leftListCheckedIndex) => {
        // 先全部设置不选中在设置选中的数据
        const currentListData =
            leftOrRight === "left" ? leftListData.value : rightList.value;
        currentListData.forEach((e) => {
            e.$checked = false;
        });
        if (setCheckLeftData.length && leftOrRight === "left") {
            for (let i = 0; i < setCheckLeftData.length; i++) {
                if (currentListData[setCheckLeftData[i]]) {
                    currentListData[setCheckLeftData[i]].$checked = true;
                }
            }
            leftData.value[leftListCheckedIndex.value]["data"] = currentListData;
            return {
                leftData
            }
        }
        if (setCheckRightData.length && leftOrRight === "right") {
            for (let i = 0; i < setCheckRightData.length; i++) {
                if (currentListData[setCheckRightData[i]]) {
                    currentListData[setCheckRightData[i]].$checked = true;
                }
            }
            rightList.value = currentListData;
            return {
                rightList
            }
        }
    }
    return {
        setCheckedData,
        setCustomizeCheckedData
    }
}
export const useButtonFun = (leftListData, rightList) => {
    const setBtnEvent = (leftOrRight) => {
        let checkedData = []
        switch (leftOrRight) {
            case "left":
                checkedData = JSON.parse(
                    JSON.stringify(leftListData.value.filter((v) => v.$checked))
                );
                break;
            case "right":
                checkedData = JSON.parse(
                    JSON.stringify(rightList.value.filter((v) => v.$checked))
                );
                break
        }
        checkedData.forEach((e) => {
            e.$checked = false;
        });
        return checkedData
    }
    return {
        setBtnEvent
    }
}
export const useTable = (leftTable, rightTable, leftListData, rightList, leftData,
    leftListCheckedIndex, leftUL, rightUL, type, startIndex, dragItem) => {
    const setTableWidth = (columnTitles) => {
        nextTick(() => {
            const widthList = columnTitles.map((e) => e.width);
            if (leftTable.value) {
                const thead = leftTable.value.childNodes[0].children[0];
                const theadChildrenNodeNums = thead.children.length;
                for (let i = 0; i < theadChildrenNodeNums; i++) {
                    const th = thead.children[i];
                    th.style.width = widthList[i] + "px";
                }
            }
            if (rightTable.value) {
                const _thead = rightTable.value.childNodes[0].children[0];
                const _theadChildrenNodeNums = _thead.children.length;
                for (let i = 0; i < _theadChildrenNodeNums; i++) {
                    const th = _thead.children[i];
                    th.style.width = widthList[i] + "px";
                }
            }
        });
    };
    const setFormatItem = (item) => {
        const titleList = Object.keys(item).filter(
            (e) => e !== "$checked" && e !== "disabled" && e != "key"
        );
        const obj = {};
        for (let i = 0; i < titleList.length; i++) {
            obj[titleList[i]] = item[titleList[i]];
        }
        return obj;
    }
    const setMouseEnter = (innerHTML, checked, clientX, clientY, toolTipText, toolTip,) => {
        const checkText = checked ? "checked" : "Pleae check";
        toolTipText.value = innerHTML || checkText;
        toolTip.value.style.left = clientX - 400 + "px";
        toolTip.value.style.top = clientY - 70 + "px";
    }
    const setSameDropEvent = (leftOrRight, e) => {
        let endIndex = 0;
        let endItem = {};
        if (leftOrRight === "left") {
            let leftItems;
            if (type === "default") {
                leftItems = leftUL.value.children;
            } else {
                leftItems = leftTable.value.childNodes[0].children[1].children;
            }
            for (let i = 0; i < leftItems.length; i++) {
                if (leftItems[i] === e) {
                    endIndex = i;
                    endItem = leftListData.value[i];
                }
            }
            if (Object.keys(endItem).length) {
                leftData.value[leftListCheckedIndex.value]["data"][endIndex] =
                    dragItem.value;
                leftData.value[leftListCheckedIndex.value]["data"][startIndex.value] =
                    endItem;
            } else {
                return
            }
            return {
                leftData
            }
        } else {
            let rightItems;
            if (type === "default") {
                rightItems = rightUL.value.children;
            } else {
                rightItems = rightTable.value.childNodes[0].children[1].children;
            }
            for (let i = 0; i < rightItems.length; i++) {
                if (rightItems[i] === e) {
                    endIndex = i;
                    endItem = rightList.value[i];
                }
            }
            if (Object.keys(endItem).length) {
                rightList.value[endIndex] = dragItem.value;
                rightList.value[startIndex.value] = endItem;
            } else {
                return
            }
            return {
                rightList
            }
        }
    }
    return {
        setTableWidth,
        setFormatItem,
        setMouseEnter,
        setSameDropEvent
    }
}
export const useOriginData = (leftListData, rightList) => {
    let originDataMap = new Map()
    const originLeftData = JSON.parse(JSON.stringify(leftListData.value));
    const originRightData = JSON.parse(JSON.stringify(rightList.value));
    originDataMap.set("left", originLeftData)
    originDataMap.set("right", originRightData)
    return {
        originDataMap
    }
}
export const useSearchEvent = (filterLeftWord, filterRightWord, leftSearch, rightSearch, leftData, leftListCheckedIndex, rightList) => {
    const setSearch = (leftOrRight, originData) => {
        if (leftOrRight === "left") {
            if (typeof filterLeftWord.value === "string") {
                if (filterLeftWord.value.trim() !== "") {
                    const filterLeftData = leftSearch(originData, filterLeftWord.value);
                    leftData.value[leftListCheckedIndex.value]["data"] =
                        ref(filterLeftData).value;
                    return {
                        leftData
                    }
                } else {
                    leftData.value[leftListCheckedIndex.value]["data"] =
                        ref(originData).value;
                    return {
                        leftData
                    }
                }
            }
        } else {
            if (typeof filterRightWord.value === "string") {
                if (filterRightWord.value !== "") {
                    const filterRightData = rightSearch(
                        originData,
                        filterRightWord.value
                    );
                    rightList.value = ref(filterRightData).value;
                    return {
                        rightList
                    }
                } else {
                    rightList.value =
                        ref(originData).value;
                    return {
                        rightList
                    }
                }
            }
        }
    }
    return {
        setSearch
    }
}